<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exp-Inlet-Gateway</title>
    <link rel="stylesheet" href="/static/style/main.css">
    <link rel="stylesheet" href="/static/framework/bootstrap.min.css">
    <script src="/static/framework/jquery.min.js"></script>
    <script src="/static/framework/bootstrap.bundle.min.js"></script>
</head>
<#--  以下JS文件必须在JQuery加载完才能加载  -->
<script src="/static/script/main.js"></script>
<script src="/static/script/updateApp.js"></script>
<#--  以下JS文件必须在JQuery加载完才能加载  -->

<body class="container" style="min-width: 1310px;">
<nav class="navbar navbar-expand-lg navbar-light container-fluid">
    <div class="container-fluid  bg-light">
        <a href="/static/app/list" class="navbar-brand text-start"
           style="font-family: 微软雅黑,serif; color: #3030ff; font-size: 24px;">Exp-Inlet</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!--        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">-->
        <!--            <div class="navbar-nav">-->
        <!--                <a class="nav-link active" aria-current="page" href="#">Home</a>-->
        <!--                <a class="nav-link active" aria-current="page" href="#">应用列表</a>-->
        <!--                <a class="nav-link" href="/static/SysInfos.html">运行状态</a>-->
        <!--                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>-->
        <!--                <a class="nav-link" href="/login/out"><span class="login-out">退出</span></a>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="collapse navbar-collapse" aria-label="breadcrumb" style="line-height: 1px; text-align: center;align-items: center;">
            <ol class="breadcrumb" style="margin-bottom: 0;">
<#--                <li class="breadcrumb-item"><a href="#">Exp-Inlet</a></li>-->
                <li class="breadcrumb-item active" aria-current="page"><a href="/static/app/list">应用列表</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page"><a href="#">运行状态</a></li>
            </ol>
        </div>
        <form class="d-flex">

            <input class="form-control w-75 me-2" style="height: 32px;" type="search" placeholder="Search"
                   aria-label="Search">
            <button class="btn btn-outline-success" style="width: 80px" type="submit" onclick="$.loginOut()">
                <a href="javascript:;"><span>退出</span></a>
            </button>
        </form>
    </div>
</nav>
<div class="container-fluid mt-4">
    <div class="rightP">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-11" style="line-height: 30px;font-weight: bold;"> 系统运行状态</div>
                    <div class="col-md-1">
                        <button type="button" class="btn btn-primary right black-ip-update" style="margin-top: 1px"
                                onclick="get(0)">刷新
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-3 col-sm-12">
                        <div class="sys-info-block">
                            <h3><span class="expApiRunTime">0D0H0s</span></h3>
                            <h3>运行时间</h3>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-12">
                        <div class="sys-info-block">
                            <h3><span class="appCount">0</span></h3>
                            <h3>运行应用数</h3>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-12">
                        <div class="sys-info-block">
                            <h3><span class="apiCount">0</span></h3>
                            <h3>运行API数</h3>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-12">
                        <div class="sys-info-block">
                            <h3><span class="errorCount">0</span></h3>
                            <h3>异常发生次数</h3>
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-lg-4 col-sm-12">
                        <div class="sys-info-block">
                            <h3><span class="requestApiCount">0</span></h3>
                            <h3>全局请求次数</h3>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-12">
                        <div class="sys-info-block">
                            <h3><span class="requestHttpApiCount">0</span></h3>
                            <h3>HTTP处理器请求次数</h3>
                        </div>
                    </div>
                    <div class="col-lg-4 col-sm-12">
                        <div class="sys-info-block">
                            <h3><span class="currentHttpApiProcessingCount">0</span></h3>
                            <h3>HTTP处理器正在处理数</h3>
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-lg-3 col-sm-12">
                        <div class="sys-info-block">
                            <h3><span class="availableProcessors">0</span></h3>
                            <h3>CPU核心数量</h3>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-12">
                        <div class="sys-info-block">
                            <h3><span class="totalMemory">0</span></h3>
                            <h3>JVM-内存总量</h3>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-12">
                        <div class="sys-info-block">
                            <h3><span class="freeMemory">0</span></h3>
                            <h3>JVM-空闲内存</h3>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-12">
                        <div class="sys-info-block">
                            <h3><span class="maxMemory">0</span></h3>
                            <h3>JVM-最大内存</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default mt-5" style="margin-top: 10px">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <div class="row">
                        <div class="row">
                            <div class="col-md-7" style="line-height: 30px;">
                                <span class="fs-5"> 全局IP黑名单 </span>
                                <span class="scope-test fs-6" style="font-size: 12px;color: #bd0a0a;">操作提示:双击IP地址进行删除IP,双击取消放弃编辑</span>
                            </div>
                            <div class="col-md-2">
                                <input type="text" style="border-radius: 4px;margin-top: 0.35rem;"
                                       class="console-textbox fw-bold form-control me-2" id="add-ip-span" placeholder="请输入黑名单IP地址">
                            </div>
                            <div class="col-md-1" id="edit">
                                <button type="button" class="btn btn-warning right" onclick="btnUpdate(this)">编辑</button>
                            </div>
                            <div class="col-md-1 hide" id="adds">
                                <button type="button" class="btn btn-warning right" onclick="addIpSpan()">添加</button>
                            </div>
                            <div class="col-md-1 hide" id="submit">
                                <button type="button" class="btn btn-success right black-ip-success" onclick="submitIpUpdate()">确定</button>
                            </div>
                            <div class="col-md-1 hide" id="cancel">
                                <button type="button" class="btn btn-primary right black-ip-update" onclick="btnCancel(this)">取消</button>
                            </div>
                        </div>
                    </div>
                </h3>
            </div>
            <div id="ip-span-box" class="ip-span-box" style="margin:20px 0;text-align: center"></div>
        </div>
    </div>
    <!-- rightP End -->
</div>


<script>
    // ❌
    // 是否为编辑状态
    var isEdit = false;
    const ipSet = new Set([]);
    const delIpSet = new Set([]);
    const delBox = `<div id="delBox" class='custom-badge badge-box ms-2'>✖</div>`;
    const ipItem = `<div class='btn btn-default black-ip-btn' onclick='delIpSpan(this, @ip@)'>
                    <div class='custom-scope-test me-2' style="display: flex">
                        <div class='me-2'>👽</div>
                        <div class='ip me-2'>@ip@</div> @delBox@
                    </div>
                    </div>`;
    //修改黑名单
    function btnUpdate(btn) {
        isEdit = true;
        $("#edit").hide();
        $("#adds").show();
        $("#cancel").show();
        $("#submit").show();
        $(".ip-span-box").html("")
        ipSet.forEach(function (k) {
            $(".ip-span-box").append($(ipItem.replaceAll("@ip@", k).replace("@delBox@", delBox)));
        });
    }

    //取消修改黑名单
    function btnCancel(btn) {
        isEdit = false;
        $("#edit").show();
        $("#adds").hide();
        $("#cancel").hide();
        $("#submit").hide();
        $(".badge-box").hide();
        delIpSet.forEach(function (v, i, s) {
            ipSet.add(v);
            $(".ip-span-box").append($(ipItem.replaceAll("@ip@", v).replace("@delBox@", "")));
        });
        delIpSet.clear();
    }

    //删除黑名单
    function delIpSpan(btn, ip) {
        console.log(btn, ip);
        if (!isEdit) {
            return;
        }
        ipSet.delete(ip.toString());
        delIpSet.add(ip);
        $(btn).remove();
    }

    //添加给名单
    function addIpSpan() {
        
        var ip = $("#add-ip-span").val();
        if (ip === '') {
            $.showNotice("Waring", "请填写IP数据")
            return;
        }
        if (ipSet.has(ip)) {
            $.showNotice("ERROR", "已经存在此数据IP数据")
            return;
        }
        ipSet.add(ip.trim())
        $(".ip-span-box").append($(ipItem.replaceAll("@ip@", ip).replace("@delBox@", delBox)));
    }

    //确定修改全局黑名单
    function submitIpUpdate() {
        const ipList = [];
        ipSet.forEach(function (v) {
            ipList.push(v);
        });
        console.log(ipSet, ipList);
        $.ajax({
            type: "post",
            url: '/static/sys/replaceIpList',
            data: JSON.stringify(ipList),
            dataType: "json",
            success: function (result) {
                if (result.code !== 200) {
                    $.showNotice("ERROR", "更新黑名单失败!");
                    console.log("获取失败", result);
                    return
                }
                location.reload();
            },
            error: function () {
                $.showNotice("ERROR", "服务器更新黑名单异常!");
            }
        });
    }

    function get(id) {
        $.ajax({
            type: "get",
            url: '/static/sys/info',
            async: true,
            data: id,
            dataType: "json",
            success: function (result) {
                if (result.code !== 200) {
                    $.showNotice("ERROR", "获取数据失败");
                    console.log("获取失败", result);
                    return;
                }
                var res = result.data;
                $(".expApiRunTime").text(res.expApiRunTime);
                $(".appCount").text(res.appCount);
                $(".apiCount").text(res.apiCount);
                $(".errorCount").text(res.errorCount);
                $(".requestApiCount").text(res.requestApiCount);
                $(".requestHttpApiCount").text(res.requestHttpApiCount);
                $(".currentHttpApiProcessingCount").text(res.currentHttpApiProcessingCount);
                $(".availableProcessors").text(res.availableProcessors);
                $(".totalMemory").text(res.totalMemory + "M");
                $(".freeMemory").text(res.freeMemory + "M");
                $(".maxMemory").text(res.maxMemory + "M");
                ipSet.clear()
                const ipBox = $(".ip-span-box")
                ipBox.html('')
                console.log(res);
                const item = res.content;
                for (let i = 0; i < item.length; i++) {
                    ipSet.add(item[i])
                    ipBox.append($(ipItem.replaceAll("@ip@", item[i]).replace("@delBox@", "")));
                }
            },
            error: function () {
                $.showNotice("ERROR", "获取应用失败");
            }
        });
    }

    $(function () {
        get(0);
    });
</script>
</body>

</html>